<template>
	<view class="apply">
		 <view class="" style="background: none;">
		 	<view class="service">
		 		
		 		<view class="content">
		 			<view class='info'>
		 				<view class="info_title">请上传照片</view>
		 				<view class="info_val">
		 					<view class="upImg imgPublic" @click='checkchoose'>
		 						<image v-if='yun_image' :src='imgDomain + yun_image' mode="widthFix"></image>
		 						<image v-else src="https://wx.gdxixiashi.com/public/images/person/comment_up.png" mode="widthFix"></image>
		 					</view>
		 				</view>
		 			</view>
		 			
		 		</view>
				<view class="content">
					<view class='info' style="color:red;">
						请上传宽高比为16：9的照片
					</view>
					
				</view>
		 	</view>
		 </view>
		<view class="seat"></view>
		
		<view class="btns">
			<view class="btn" @tap='apply'>
				提交
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yun_image:'',
				imgDomain:getApp().globalData.imgDomain
			};
		},
		onLoad() {
			this.initUser();
		},
		onShow(){},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initUser(){
				this.tool.getUserInfo().then(res=>{
					this.yun_image = res.yun_image;
				}).catch(err=>{
					console.log(err);
				})
			},
			
			// 查看大图
			lookBig(image){
				let arr = [];
				arr.push(image);
				
				uni.previewImage({
					current:image,
					urls:arr,
				})
			},
			checkchoose(){
				// #ifdef APP-PLUS
				if(!uni.getStorageSync('is_upload')){
					uni.showModal({
						title:'权限申请说明',
						content:'本次申请使用您的相机和存储权限用于上传支付凭证，是否同意',
						success:(op)=>{
							if(op.confirm){
								this.chooseImg()
							}
						},
					})
				}else{
					this.chooseImg()
				}
				// #endif
				
				// #ifdef MP-WEIXIN
				this.chooseImg()
				// #endif
			},
			// 上传图片
			chooseImg(){
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count:1,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						if(info.tempFiles.length){
							this.tool.upImgs(info.tempFiles[0].tempFilePath).then(res=>{
								if(res){
									this.yun_image = res.image_path;
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				// #endif
				// #ifdef APP-PLUS
				uni.chooseImage({
					count:1,
					sourceType:['album', 'camera'],
					sizeType:['original', 'compressed'],
					success:(info)=>{
						uni.setStorageSync('is_upload',1);
						if(info.tempFiles.length){
							this.tool.upImg(info.tempFiles[0].path).then(res=>{
								if(res){
									this.yun_image = res.image_path;
								}
							}).catch(err=>{
								console.log(err);
							})
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
				// #endif
			},
			// 提交申请
			apply(){
				
				if(!this.yun_image){
					uni.showToast({
						title:'请上传照片',
						icon:"none"
					})
					return;
				}
				this.tool.getData('User/changeInfo',{
					memberId:uni.getStorageSync('userId'),
					yun_image:this.yun_image,
				}).then(res=>{
					if(res){
						uni.showToast({
							title:'上传成功',
							icon:"none"
						})
						this.initUser();
					}
				}).catch(err=>{
					console.log(err);
				})
				

			}
		}
		
	}
</script>

<style lang="scss">
	/*每个页面公共css*/
	@font-face {
		font-family:'itemFont';
		src: url('http://wx.gdxixiashi.com/AaHouDiHei.ttf');
	}
	page{
		width: 100%;
		height: 100%;
	}
	.apply{
		width: 100%;
		height: 100%;
		position: relative;
		.service{
			width:100%;
			max-height: 80vh;
			background:white;
			border-radius: 4px;
			overflow: hidden;
			overflow-y: auto;
			.btns{
				width:100%;
				.btn{
					width:50%;
					padding:10px 0;
					text-align: center;
					font-size: 13px;
					color: #666666;
				}
				.sure{
					background: #1664FF;
					color:white;
				}
			}
			.content{
				width:100%;
				padding:12px;
				box-sizing: border-box;
				.info{
					width:100%;
					margin-bottom:10px;
					.info_title{
						width: 100%;
						margin-bottom: 8px;
					}
					.upVid{
						width:120px;
						margin:0 auto;
						text-align: center;
						color:#1664FF;
					}
					.upImg{
						width: 120px;
						margin:0 auto;
					}
					.serviceOne{
						display: inline-block;
						width:calc((100% - 24px) / 3);
						margin-right: 12px;
						text-align: center;
						margin-bottom: 12px;
						padding:6px 0;
						border-radius: 50px;
						border:1px solid #909399;
						box-sizing: border-box;
						color:#666666;
						font-size:13px;
					}
					.active{
						background: #1664FF;
						color:white;
						border-color: #1664FF;
					}
					.serviceOne:nth-child(3n + 4){
						margin-right: 0;
					}
				}
				.info:last-child{
					margin:0;
				}
			}
			.title{
				width:100%;
				padding:12px 0;
				text-align: center;
				border-bottom: 1px solid rgba(0,0,0,0.1);
			}
		}
		.showContent{
			width:100%;
			padding:12px;
			box-sizing: border-box;
		}
		.adv2{
			width: 72%;
			position:absolute;
			left: 14%;
			top: 28%;
			text-align: center;
			color: white;
			font-size: 17px;
			font-weight: 500;
			color: #ffffff;
			line-height: 60px;
			letter-spacing: 10px;
		}
		.adv{
			width: 74%;
			position:absolute;
			left: 13%;
			top: 8%;
			color: white;
			font-family: 'itemfont';
			font-weight: bold;
			font-size: 65px;
			text-align: center;
			line-height: 72px;
			letter-spacing: -5.92px;
			text-shadow: 0px 2.5px 2.5px 0px rgba(249,139,41,0.75); 
		}
		.btns {
			padding: 40rpx 46rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			box-sizing: border-box;
			.btn {
				width: 100%;
				background: linear-gradient(0deg, #609ff8 0%, #1664ff 100%);
				text-align: center;
				display: block;
				padding: 24rpx 0;
				font-size: 13px;
				color: white;
				border-radius: 80rpx;
			}
		}
		.advImg{
			width: 100%;
			height: 100%;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
